<template>
  <el-row>
    <el-descriptions
      class='margin-top'
      title='基本信息'
      :column='3'
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class='cell-item'>
            <el-icon :style='iconStyle'>
              <user />
            </el-icon>
            集群名称
          </div>
        </template>
        本地集群
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class='cell-item'>
            <el-icon :style='iconStyle'>
              <iphone />
            </el-icon>
            接入时间
          </div>
        </template>
        18100000000
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class='cell-item'>
            <el-icon :style='iconStyle'>
              <location />
            </el-icon>
            Kafka版本
          </div>
        </template>
        v2.3
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class='cell-item'>
            <el-icon :style='iconStyle'>
              <tickets />
            </el-icon>
            Bootstrap Servers
          </div>
        </template>
        <el-tag size='small'>192.168.30.84:9092,192.168.30.85:9092,192.168.30.86:9092</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class='cell-item'>
            <el-icon :style='iconStyle'>
              <office-building />
            </el-icon>
            Zookeeper
          </div>
        </template>
        <el-tag size='small'>192.168.30.84:2181,192.168.30.85:2181,192.168.30.86:2181</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </el-row>
  <el-row>
    <div class='header'>
      <h4>实时流量</h4>
      <div class='header-tools'>
        <el-button type='text'>
          <el-icon>
            <refresh />
          </el-icon>
          刷新
        </el-button>
      </div>
    </div>
    <el-table :data='realTimeFlowData' style='width: 100%'>
      <el-table-column prop='name' label='名称' sortable width='180' />
      <el-table-column prop='avg' label='平均数' sortable width='180' />
      <el-table-column prop='last1Min' label='前1分钟' />
      <el-table-column prop='last5Min' label='前5分钟' sortable />
      <el-table-column prop='last15Min' label='前15分钟' />
    </el-table>
  </el-row>
  <el-row>
    <div class='header'>
      <h4>历史流量</h4>
    </div>
    <el-form :inline='true' :model='historyFlowQuery' class='demo-form-inline'>
      <el-form-item label='统计类型'>
        <el-select v-model='historyFlowQuery.statisticType' :default-first-option='true'>
          <el-option label='所有集群' value=''></el-option>
          <el-option label='集群1' value='cluster01'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=''>
        <el-date-picker
          v-model='historyFlowQuery.range'
          type='daterange'
          range-separator='To'
          start-placeholder='Start date'
          end-placeholder='End date'
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script lang='ts'>

import { Options, Vue } from 'vue-class-component';
import {
  HistoryFlowQuery,
  RealTimeFlowData,
  StatisticsType,
} from '@/types/kafka-admin/cluster-types';

@Options({
  components: {},
})
export default class ClusterOverView extends Vue {
  iconStyle = {};

  historyFlowQuery: HistoryFlowQuery = {
    statisticType: StatisticsType.BytesInBysteOut,
    range: [],
  };

  realTimeFlowData: RealTimeFlowData[] = [];
}
</script>

<style scoped>
.header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.header-tools {
}
</style>
